<template>
    <a-tabs size="small" v-model:activeKey="store.tree.active" @tabClick="tabClick" type="editable-card" @edit="remove" hideAdd>
        <a-tab-pane v-for="pane in store.tabs.list" :key="pane.id">
            <template #tab>
                <div :title="pane.title || pane.url" class="titleTab" @contextmenu.prevent="tabClick(pane.id, $event)" @mousedown.prevent.stop="remove(pane.id, $event)">
                    <iconTag :colorType="pane.type" />{{pane.title || pane.url}}
                </div>
            </template>
            <div style="padding:10px 20px;">
                <ContentView :item="pane" />
            </div>
        </a-tab-pane>
        <template #rightExtra>
            <a-button size="small" shape="round" @click="openGlobalbParam">全局Header</a-button>&nbsp;&nbsp;
        </template>
    </a-tabs>
    <a-modal v-model:visible="GlobalbModalStatus" @ok="GlobalbParamConfirm" title="全局参数配置">
        <GlobalbParam ref="GlobalbParamRef"></GlobalbParam>
    </a-modal>
    <a-menu :style="menuStyle" v-if="menuVisible">
        <a-menu-item class="right-menu-item" @click.stop="MenuClick('left')">关闭左侧标签</a-menu-item>
        <a-menu-item class="right-menu-item" @click.stop="MenuClick('right')">关闭右侧标签</a-menu-item>
        <a-menu-item class="right-menu-item" @click.stop="MenuClick('other')">关闭其他标签</a-menu-item>
        <a-menu-item class="right-menu-item" @click.stop="MenuClick('all')">关闭全部</a-menu-item>
    </a-menu>
</template>
<script setup>
import iconTag from '../iconTag.vue'
import { reactive, ref } from 'vue'
import GlobalbParam from '../global/param.vue'
import ContentView from './ContentView.vue'
import { useStore } from '../../libs/store'
const store = useStore()
const GlobalbModalStatus = ref(false);
const GlobalbParamRef = ref(null)

const menuVisible = ref(false);
const menuStyle = reactive({
    position: "absolute",
    top: "0",
    left: "0",
    border: "1px solid #eee",
    zIndex: 100,
    borderRadius: '5px',
    padding: '7px 0',
})

const openGlobalbParam = () => {
    GlobalbModalStatus.value = true;
    setTimeout(() => {
        GlobalbParamRef.value.setValue(store.headers);
    }, 300)
}
const GlobalbParamConfirm = () => {
    var data = GlobalbParamRef.value.getValue();
    if (data !== null) {
        GlobalbModalStatus.value = false;
        store.headers = data;
    }
}

let RightItemId = null;

const tabClick = (item, $event) => {
    if ($event.button != 2) return;
    RightItemId = JSON.parse(JSON.stringify(item));
    menuStyle.top = $event.clientY + 'px';
    menuStyle.left = $event.clientX + 'px';
    menuVisible.value = true;
}

const MenuClick = (type) => {
    menuVisible.value = false;
    store.removeTabsItem(RightItemId, type);
}


document.addEventListener('click', () => {
    menuVisible.value = false;
})

const remove = (targetKey, event) => {
    menuVisible.value = false;
    if (event == 'remove' || event.button == 1) {
        store.removeTabsItem(targetKey, 'self');
    };
};


</script>
<style lang="less" scoped>

.titleTab {
    padding: 8px 0;
    max-width: 150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display: inline-block;
    vertical-align: middle;
}

:deep(.ant-tabs-content) {
    height: 100%;
    overflow-y: auto;
}

:deep(.ant-tabs-nav) {
    padding-left: 10px;
    user-select: none;
    border-bottom: 1px solid var(--main-BC);
    height: 41px;
    background-color: #DDD;
    border-left: 1px solid var(--main-BC);
}

:deep(.ant-tabs-nav::before) {
    border-color: transparent;
}
</style>